{include file="$header" /}
<div class="mk-app-warp">
    <div class="mk-plugin-card mk-card-tabs">
        <el-tabs type="card" v-model="search.install" @tab-click="getData">
            <el-tab-pane label="插件中心" name="0"></el-tab-pane>
            <el-tab-pane label="已安装" name="1"></el-tab-pane>
        </el-tabs>
    </div>
    <mk-table-header
        keyword-title="插件名称关键词搜索"
        @search="searchData($event)">
        <template v-slot:search>
            <div style="display: inline-block;margin-top: 4px;">
                <el-popover
                    placement="bottom"
                    width="400"
                    trigger="click">
                    <el-form :model="login" label-width="80px">
                        <el-form-item label="平台账号">
                            <el-input v-model="login.account" placeholder="填写您在OneKeyAdmin官网上购买插件的账号"></el-input>
                        </el-form-item>
                        <el-form-item label="平台密码">
                            <el-input v-model="login.password" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-upload
                                :action="admin_url('plugins/upload')"
                                :show-file-list="false"
                                :data="login"
                                :on-success="zipSuccess"
                                accept="aplication/zip">
                                <el-button type="primary" size="small">确定上传</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <el-button type="warning" size="small" slot="reference">上传插件包</el-button>
                </el-popover>
            </div>
        </template>
    </mk-table-header>
    <el-card class="mk-plugins-catalog" shadow="hover">
        <div class="mk-plugins-catalog-item">
            <div class="title">分类:</div>
            <ul>
                <li @click="catalogChange('')">
                    <el-link :underline="false" :class="{active: search.catalog_id === ''}">全部</el-link>
                </li>
                <li v-for="(item, index) in catalog" @click="catalogChange(item.id)">
                    <el-link :underline="false" :class="{active: search.catalog_id === item.id}">{{item.title}}</el-link>
                </li>
            </ul>
        </div>
        <div class="mk-plugins-catalog-item">
            <div class="title">价格:</div>
            <ul>
                <li v-for="(item, index) in price" @click="priceChange(item.value)">
                    <el-link :underline="false" :class="{active: search.price === item.value}">{{item.title}}</el-link>
                </li>
            </ul>
        </div>
    </el-card>
    <el-table
        :data="table"
        v-loading="loading"
        :default-sort="{prop: search.prop, order: search.order}"
        @sort-change="sortChange">
        <el-table-column prop="title" label="插件" sortable="custom" width="300">
            <template slot-scope="scope">
                <div style="display: flex;">
                    <el-image :src="scope.row.cover" class="mk-table-cover">
                        <div slot="error" class="image-slot">
                            <img class="error-image" :src="static + '/images/error.png'"/>
                        </div>
                    </el-image>
                    <div style="margin-left: 10px">
                        <div>
                            <span class="mk-plugin-title">{{scope.row.title}}</span>
                            <span>
                                由&nbsp;&nbsp;<span style="color: #0073aa">{{scope.row.user_nickname}}</span>&nbsp;&nbsp;开发
                            </span>
                        </div>
                        <div style="color: #E6A23C;font-size: 14px">{{scope.row.price === '0.00' ? '免费' : scope.row.price + '元'}}</div>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="describe" label="描述"></el-table-column>
        <el-table-column prop="download" label="下载次数" sortable="custom" width="100"></el-table-column>
        <el-table-column prop="status" label="启动" width="100px">
            <template slot-scope="scope">
                <el-switch
                    v-if="scope.row.now_version_number !== '未安装'"
                    v-model="scope.row.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="1"
                    :inactive-value="0"
                    @change="status(scope.row)"
                    :disabled="editAuthority === false">
                </el-switch>
                <el-tag v-else type="danger">未安装</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
                <el-tooltip content="详情" placement="top" v-if="scope.row.id !== '' && detailsAuthority">
                    <el-button icon="el-icon-search" size="mini" circle @click="getDetails(scope.row)"></el-button>
                </el-tooltip>
                <el-tooltip content="安装" placement="top">
                    <el-button
                        v-if="scope.row.now_version_number === '未安装' && scope.row.need_pay === 0"
                        :loading="scope.row.installLoading"
                        size="mini"
                        icon="el-icon-download"
                        type="primary" 
                        @click="pluginInstall(scope.row)"
                        circle>
                    </el-button>
                </el-tooltip>
                <el-tooltip content="购买" placement="top">
                    <el-button
                        v-if="scope.row.now_version_number === '未安装' && scope.row.need_pay === 1"
                        :loading="scope.row.installLoading"
                        size="mini"
                        icon="el-icon-goods"
                        type="success" 
                        @click="shop(scope.row)"
                        circle>
                    </el-button>
                </el-tooltip>
                <el-tooltip content="更新" placement="top">
                    <el-button
                        v-if="scope.row.id !== '' && scope.row.now_version_number !== '未安装' && scope.row.now_version_number !== scope.row.new_version_number"
                        :loading="scope.row.updateLoading"
                        size="mini"
                        icon="el-icon-warning-outline"
                        type="warning" 
                        @click="pluginUpdate(scope.row)"
                        circle>
                    </el-button>
                </el-tooltip>
                <mk-table-public
                    v-if="delAuthority && scope.row.now_version_number !== '未安装'"
                    style="margin-left: 10px;"
                    del-title="卸载"
                    :del-url="delUrl"
                    @del="del(scope.row)">
                </mk-table-public>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        @current-change="pageChange"
        :current-page="search.page"
        :page-size="search.pageSize"
        :total="pageTotal"
        layout="total, prev, pager, next, jumper"
        background
        hide-on-single-page>
    </el-pagination>
    <el-dialog
        class="mk-order-dialog"
        :before-close="orderClose"
        title="购买插件"
        :visible.sync="dialog"
        width="650px">
        <iframe :src="api + '/system/plugins/orderDetails?orderId=' + order.id"></iframe>
    </el-dialog>
</div>
{include file="plugins/drawer"}
{include file="$component" /}
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                table: [],
                order: {},
                shopRaw: {},
                dialog: false,
                login: {
                    account: '',
                    password: '',
                },
                search:{
                    date: [],
                    keyword: "",
                    page: 1,
                    pageSize: 30,
                    prop: "sort", 
                    order: "descending",
                    price: "all",
                    catalog_id: "",
                    install: "0",
                },
                price:[{title: "全部", value: "all"},{title: "免费", value: "free"},{title: "付费", value: "price"}],
                catalog: {:json_encode($catalog)},
                pageTotal: 0,
                url: "plugins/list",
                orderUrl: 'plugins/createOrder',
                delUrl: "plugins/delete",
                editUrl: "plugins/update",
                detailsUrl: "plugins/details",
                commentUrl: "plugins/comment",
                installUrl: "plugins/install",
                loading: false,
                previewDialog: false,
                preview: {},
                detailsLoading: false,
                commentLoading: false,
                commentSearch:{
                    id: "",
                    page: 1,
                    prop: "create_time", 
                    order: "descending",
                },
                commentPageTotal: 0,
                commentList: [],
            }
        },
        created () {
            this.getData();
        },
        computed: {
            delAuthority() {
                return authorityPath.indexOf(this.delUrl) !== -1
            },
            editAuthority() {
                return authorityPath.indexOf(this.editUrl) !== -1;
            },
            detailsAuthority() {
                return authorityPath.indexOf(this.detailsUrl) !== -1;
            },
            commentAuthority() {
                return authorityPath.indexOf(this.commentUrl) !== -1;
            },
        },
        methods: {
            /**
             * 获取数据
             */
            getData() {
                let self     = this;
                self.loading = true;
                request.post(self.url, self.search, function(res) {
                    self.loading   = false;
                    self.table     = res.data;
                    self.pageTotal = res.count;
                    self.table.forEach(function (item, index) {
                        item['installLoading'] = false;
                        item['updateLoading']  = false;
                        self.$set(self.table, index, item);
                    });
                    parent.parentVm.menus = tree.convert(res.publicMenu);
                });
            },
            /**
             * 关闭订单
             */
            orderClose() {
                this.pluginInstall(this.shopRaw);
                this.dialog = false;
            },
            /**
             * 排序
             */
            sortChange(v) {
                this.search = Object.assign({}, this.search, {prop: v.prop , order: v.order});
            },
            /**
             * 查看详情
             * @param  {Object} row 当前行
             */
            getDetails(row) {
                let self            = this;
                self.detailsLoading = true;
                self.preview        = row;
                request.post(self.detailsUrl, {id: row.id}, function(res) {
                    self.detailsLoading = false;
                    self.preview = JSON.parse(JSON.stringify(res.data));
                    self.preview = Object.assign({}, self.preview, {now_version_number: row.now_version_number, new_version_number: row.new_version_number});
                });
                // 获取评论
                this.previewDialog    = true;
                this.commentPageTotal = 0;
                this.commentList      = [];
                this.commentSearch    = Object.assign({}, this.commentSearch, {page: 1, id: row.id});
                this.getComment();
            },
            /**
             * 评论分页
             */
            getComment() {
                let self = this;
                self.commentLoading = true;
                request.post(self.commentUrl, self.commentSearch, function(res) {
                    self.commentLoading = false;
                    self.commentList = res.data;
                    self.commentPageTotal = res.count;
                });
            },
            /**
             * 评论分页
             */
            commentPageChange(val) {
                this.commentSearch = Object.assign({}, this.commentSearch, {page: val});
                this.getComment();
            },
            /**
             * 插件更新
             * @param  {Object} row 当前行
             */
            pluginUpdate(row) {
                let self = this;
                let index = self.table.indexOf(row);
                row.updateLoading = true;
                row.install_type  = 1;
                self.$set(self.table, index, row);
                request.post(self.installUrl, row, function(res) {
                    row.updateLoading = false;
                    self.$set(self.table, index, row);
                    self.$message({ showClose: true, message: res.message, type: res.status});
                    if (res.status === 'success') {
                        self.getData();
                    }
                });
            },
            /**
             * 购买插件
             * @param  {Object} row 当前行
             */
            shop(row) {
                let self = this;
                request.post(self.orderUrl, {id: row.id}, function(res) {
                    if (res.status === 'success') {
                        self.order  = res.data;
                        self.dialog = true;
                        self.shopRaw = row;
                    } else {
                        self.$message({ showClose: true, message: res.message, type: 'error'});
                    }
                });
            },
            /**
             * 插件安装
             * @param  {Object} row 当前行
             */
            pluginInstall(row) {
                let self = this;
                let index = self.table.indexOf(row);
                row.installLoading = true;
                row.install_type   = 0;
                self.$set(self.table, index, row);
                request.post(self.installUrl, row, function(res) {
                    row.installLoading = false;
                    self.$set(self.table, index, row);
                    self.$message({ showClose: true, message: res.message, type: res.status});
                    if (res.status === 'success') {
                        self.getData();
                    }
                });
            },
            /**
             * 状态管理
             * @param  {Object} row 当前行
             */
            status(row) {
                let self = this;
                request.post(self.editUrl, {name: row.name, value: row.status}, function(res) {
                    self.$message({ showClose: true, message: res.message, type: res.status});
                    self.getData(); 
                });
            },
            /**
             * 行删除、批量删除
             * @param  {Object} row 当前行
             */
            del(row) {
                let self = this;
                self.$confirm('确定卸载'+row.title+'插件吗？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post(self.delUrl, {name: row.name}, function(res){
                        if (res.status === 'success') {
                            self.getData();
                        } else {
                            self.$message({ showClose: true, message: res.message, type: res.status});
                        }
                    });
                }).catch(() => {});
            },
            /**
             * 关键词/日期搜索
             * @param  {Object} value 搜索内容
             */
            searchData(value) {
                this.search = Object.assign({}, this.search, {page: 1, keyword: value.keyword});
            },
            /**
             * 分类搜索
             * @param  {Object} value 搜索内容
             */
            catalogChange(value) {
                this.search = Object.assign({}, this.search, {page: 1, catalog_id: value});
            },
            /**
             * 价格类目搜索
             * @param  {Object} value 搜索内容
             */
            priceChange(value) {
                this.search = Object.assign({}, this.search, {page: 1, price: value});
            },
            /**
             * 分页改变时
             * @param  {String} val 当前页
             */
            pageChange(val) {
                this.search = Object.assign({}, this.search, {page: val});
            },
            /**
             * 安装包上传成功
             */
            zipSuccess(res, file) {
                if (res.status === 'success') {
                    this.getData(); 
                }
                this.$message({ showClose: true, message: res.message, type: res.status});
            },
        },
        watch: {
            search() {
                this.getData();
            },
        }
    })
</script>
{include file="$footer" /}